<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent]);

const option = ref({
  title: { text: '学习行为趋势' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['登录次数', '学习时长(小时)'] },
  toolbox: { feature: { saveAsImage: {} } },
  dataZoom: [{ type: 'slider', start: 0, end: 100 }],
  xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
  yAxis: [{ type: 'value', name: '次数' }, { type: 'value', name: '时长' }],
  series: [
    { name: '登录次数', type: 'line', data: [120, 200, 150, 80, 70, 110, 130] },
    { name: '学习时长(小时)', type: 'line', yAxisIndex: 1, data: [2, 3.5, 4, 3, 2.5, 3, 4.2] }
  ]
});
</script>

<style scoped>.chart { width: 100%; height: 100%; }</style>